<div cdkDrag (cdkDragDropped)="dropWidget($event)" (cdkDragStarted)="dragStarted($event)"
  style="position: absolute !important" #basicTable
  [ngStyle]="{ left: widget!.layout!.left, top: widget!.layout!.top, width: widget!.layout!.width, height: widget!.layout!.height }"
  [id]="widget!.tag" [resizeSnapGrid]="{ left: 50, right: 50 }" class="rectangle" mwlResizable
  [enableGhostResize]="true" (resizeStart)="onResizeStart($event)" (resizeEnd)="onResizeEnd($event)"
  cdkDragBoundary=".right-design">
  <nz-table style="padding: 3px;" [ngStyle]="{ 'max-height': widget!.layout!.height }" nzSize="small"
    [nzBordered]="true" [nzData]="dataSourceList" [nzCustomColumn]="customColumn">
    <thead>
      <tr>
        @for (column of customColumn; track column) {
        <th [id]="column.value" [nzCellControl]="column.value">{{ column.name }}</th>
        }
      </tr>
    </thead>
    <tbody
      [ngStyle]="{ 'background-color': getWidgetProperty('backgroundColor'),'color': getWidgetProperty('fontColor')}">
      @for (data of dataSourceList; track data) {
      <tr class="editable-row">
        @for (column of customColumn; track column) {
        <td [nzCellControl]="column.value">
          {{ data[column.value] }}
        </td>
        }
      </tr>
      }
    </tbody>
  </nz-table>
  <div class="resize-handle-top" mwlResizeHandle [resizeEdges]="{ top: true }"></div>
  <div class="resize-handle-left" mwlResizeHandle [resizeEdges]="{ left: true }"></div>
  <div class="resize-handle-right" mwlResizeHandle [resizeEdges]="{ right: true }"></div>
  <div class="resize-handle-bottom" mwlResizeHandle [resizeEdges]="{ bottom: true }"></div>
</div>
<div class="toolbar">
  <span class="btn edit-view-icon edit-icon toolbar-icon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
      <path
        d="M21.36,4.94A3.69,3.69,0,0,0,18.74,6l-2,2a.81.81,0,0,0-.18.19L7,17.74a1.94,1.94,0,0,0-.47.81L5,24.05a.79.79,0,0,0,.54,1A.82.82,0,0,0,6,25l5.5-1.57h0a2,2,0,0,0,.8-.47l9.49-9.5a.8.8,0,0,0,.23-.22l2-2a3.7,3.7,0,0,0-2.62-6.32Zm0,1.58a2.15,2.15,0,0,1,1.5.62h0a2.12,2.12,0,0,1,0,3L21.3,11.7l-3-3,1.56-1.56A2.15,2.15,0,0,1,21.36,6.52Zm-4.18,3.3,3,3-9,9.05a.24.24,0,0,1-.11.06l-.53.15L7.92,19.51,8.07,19h0a.24.24,0,0,1,.06-.11ZM7.42,21.25l1.33,1.33-1.86.53Z" />
    </svg>
  </span>
  <span class="btn edit-view-icon copy-icon toolbar-icon" data-value="copy" title="Copy to clipboard">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
      <path
        d="M7.44,5.55A1.88,1.88,0,0,0,5.55,7.44V19.73a.95.95,0,0,0,1.89,0V7.44H19.73a.95.95,0,0,0,0-1.89Zm3.78,3.78a1.88,1.88,0,0,0-1.89,1.89V22.56a1.88,1.88,0,0,0,1.89,1.89H22.56a1.88,1.88,0,0,0,1.89-1.89V11.22a1.88,1.88,0,0,0-1.89-1.89Zm0,1.89H22.56V22.56H11.22Z" />
    </svg>
  </span>
  <span class="btn edit-view-icon paste-icon toolbar-icon" data-value="paste" title="Paste from clipboard">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
      <path
        d="M15,4.76a2.51,2.51,0,0,0-2.5,2.5H9.17a2.51,2.51,0,0,0-2.49,2.5v13a2.51,2.51,0,0,0,2.49,2.5H20.83a2.51,2.51,0,0,0,2.49-2.5v-13a2.51,2.51,0,0,0-2.49-2.5H17.5A2.51,2.51,0,0,0,15,4.76Zm0,1.67a.83.83,0,1,1-.83.83A.82.82,0,0,1,15,6.43ZM9.17,8.92H12.5v.84a.84.84,0,0,0,.84.83h3.32a.84.84,0,0,0,.84-.83V8.92h3.33a.82.82,0,0,1,.83.84v13a.82.82,0,0,1-.83.83H9.17a.82.82,0,0,1-.83-.83v-13A.82.82,0,0,1,9.17,8.92Z" />
    </svg>
  </span>
  <span class="btn edit-view-icon delete-icon toolbar-icon" data-value="delete" title="Delete">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
      <path
        d="M15,4.74a3.09,3.09,0,0,0-3.08,3.08H6.53a.77.77,0,0,0-.78.76.78.78,0,0,0,.76.78H7.82V22.44a2.83,2.83,0,0,0,2.82,2.82h8.72a2.83,2.83,0,0,0,2.82-2.82V9.36h1.29a.78.78,0,0,0,.78-.76.77.77,0,0,0-.76-.78H21.54a.53.53,0,0,0-.25,0H18.08A3.09,3.09,0,0,0,15,4.74Zm0,1.54a1.53,1.53,0,0,1,1.54,1.54H13.46A1.53,1.53,0,0,1,15,6.28ZM9.36,9.36H20.64V22.44a1.26,1.26,0,0,1-1.28,1.28H10.64a1.26,1.26,0,0,1-1.28-1.28Zm3.83,2.55a.78.78,0,0,0-.76.78v7.7a.78.78,0,0,0,.76.78.77.77,0,0,0,.78-.76V12.69a.77.77,0,0,0-.75-.78Zm3.59,0a.77.77,0,0,0-.75.78v7.7a.77.77,0,0,0,.75.78.79.79,0,0,0,.79-.76V12.69a.78.78,0,0,0-.76-.78Z" />
    </svg>
  </span>
</div>